<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form style="height:97%;">
                    <div class="formSolution">
                        <!--按钮 -->
                        <div>
                            <a-form-item :labelCol1="6" :wrapperCol1="18" :label="i18n('btnPreConf.mode','模式')">
                                <a-radio-group v-model="mode" @change="modeChange">
                                    <a-radio value="vue">{{i18nIns('form.vueComponent','vue组件')}}</a-radio>
                                    <a-radio value="router">{{i18nIns('form.vueRouter','vue路由')}}</a-radio>
                                    <a-radio value="url">{{i18nIns('form.externalUrl','外部url')}}</a-radio>
                                </a-radio-group>
                            </a-form-item>
                        </div>
                        <!--内容-->
                        <div class="formSolution-center formSolution-center-flex" >
                            <a-form-item v-if="mode=='router'" :labelCol="labelCol1" :wrapper-col="wrapperCol1" :label="i18nIns('form.routingName','路由名称')">
                                <rx-input-i18n :placeholder="i18nIns('form.routingName','路由名称')" :isDecorator="true"
                                               v-model="name"/>
                            </a-form-item>
                            <a-form-item :labelCol="labelCol1" :wrapper-col="wrapperCol1" :label="componentName">
                                <a-input v-model="component" style="width: 80%;margin-right: 10px" :placeholder="componentName"/>
                                <a-tooltip placement="leftBottom" :getPopupContainer="p=>p.parentNode">
                                    <template slot="title" style="width:400px;">
                                        {{componentTips}}
                                    </template>
                                    <a-icon type="question-circle-o"/>
                                </a-tooltip>
                            </a-form-item>
                        </div>
                    </div>
                </a-form>
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import {BaseForm,RxDialog,RxLayout,Util} from "@lowcode/jpaas-common-lib";
export default {
    name: "CustomButtonMoreConfig",
    mixins: [BaseForm],
    components: {
        RxDialog,
        RxLayout
    },
    props:["layerid","destroy","config"],
    data(){
        return {
            mode:"vue",
            name:"",
            component:"",
            componentName:"",
            componentTips:""
        }
    },
    mounted(){
        this.component = this.config.component;
        this.mode = this.config.mode;
        if(!this.mode){
            this.mode="vue";
        }
        this.form.setFieldsValue({mode: this.mode,component: this.component});
        if(this.mode=='router'){
            this.name = this.config.name;
            this.form.setFieldsValue({name: this.name});
        }
        this.handleComponentName();
    },
    created() {
    },
    methods: {
        i18nIns(name,text,key){
            return this.$ti18(name,text,"insColumnDef",key);
        },
        i18n(name,text,key){
            return this.$ti18(name,text,"formBoList",key);
        },
        modeChange(){
            this.handleComponentName();
        },
        handleComponentName(){
            if(this.mode=='router'){
                this.componentName=this.i18nIns('form.routingPath','路由标识');
                this.componentTips = this.i18nIns('msa.componentRoutTips','路由标识说明');
            }else if(this.mode=='url'){
                this.componentName=this.i18nIns('form.urlAddress','url地址');
                this.componentTips = this.i18nIns('msa.componentUrlTips','url地址说明');
            }else {
                this.componentName=this.i18nIns('form.componentPath','组件路径');
                this.componentTips = this.i18nIns('msa.componentPathTips','组件路径说明');
            }
        },
        handleSubmit(){
            Util.closeWindow(this,"ok",this.getData());
        },
        cancel(){
            Util.closeWindow(this,"cancel");
        },
        getData(){
            return {mode:this.mode,component:this.component,name:this.name};
        },
    }
}
</script>

<style scoped>

.form-tree-certen:hover .form-tree{
    display: block;
}


.formSolution {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.formSolution-center {
    height: 100%;
    display: flex;
    flex: 1;
}

.formSolution-center-flex {
    flex-direction: column!important;
}
</style>